/**
* @description:待办工单列表
* @author: zx
* @date:
**/
<template>
	<view class="patrol-task">
		<nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack">
			<img slot="iconfont" v-if="taskType === '2' && currentTab === 'non-executed' || taskType === '4' && currentTab === 'non-executed'" :src="iconUrl" alt="" @click="changeApprovalStatus">
			<!-- <img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen"> -->
			<!-- <img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen"> -->
		</nav-bar>
		<view class="header-bar">
			<!-- 切换tab -->
			<div class="get-state-tab">
				<div class="info-tab-item" :class="currentTab === 'non-executed' ? ' info-tab-current': ''"
					@click="tabChange('non-executed')">待处理</div>
				<div class="info-tab-item" :class="currentTab === 'executed' ? ' info-tab-current': ''"
					@click="tabChange('executed')">已处理</div>
			</div>
		</view>
		<!-- 搜索框  -->
		<view class="patrol-search">
			<van-search disabled show-action v-model="searchValue" left-icon="" action-text="重置" right-icon="search"
				placeholder="请搜索" @click="showSearch=true" @cancel="onSearch('')" />
		</view>
		<view class="patrol-main" v-if="taskList.length > 0">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
					<!-- 列表循环   -->
					<view class="patrol-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)">
						<view class="patrol-title">
							<van-checkbox @click.self="clickCheckBox" style="margin-right: 5px;" v-if="isChoosable  " v-model="item.isChecked" />
							<view class="task-title-main">
								
								<text class="partrol-main-title">{{ item.USERNAME }}发起的{{item.TYPESName}}出入工单</text>
							</view>
							<text class="task-status" :class="color(item.AUDITSTATUS)">
								<text>{{item.AUDITSTATUSNAME}}</text>
							</text>
						</view>
						<hr class="patrol-hr">
						<view class="top-patrol-main">
							<text class="patrol-big-ltitle">发起人:</text>
							<text class="patrol-small-ltitle">{{ item.USERNAME }}</text>
							<text class="patrol-big-rtitle">所属组织:</text>
							<text class="patrol-small-rtitle">{{ item.ORGNAME }}</text>
						</view>
						<view class="top-patrol-main">
							<text class="patrol-big-ltitle">发起时间:</text>
							<text class="patrol-small-ltitle">{{ item.updateTime }}</text>
						</view>
					</view>
				</van-list>
			</van-pull-refresh>
			<view v-if="isChoosable" class="submit-wrap" >
			  <van-button block native-type="submit" @click="goApproval">审批</van-button>
			</view>
		</view>
		<!--弹出搜索页-->
		<van-popup v-model="showSearch" position="right">
			<search-equ-match @cancel="showSearch = false;" @search="onSearch" />
		</van-popup>
		<!--筛选弹窗-->
		<screenPopup :type-list="typeList" :showScreen="showScreen" @closePopup="showScreen=false"
			@confirm="confirmCondition" @reset="reset" />
		<!-- 弹出审批页 -->
		<van-popup
		    closeable
		    :close-on-click-overlay="false"
		    v-model="showApproval"
		    position="bottom"
			
		>
		  <Approval @submitApproval="examineSeal" :isChangeRadio="isChangeRadio"></Approval>
		</van-popup>
	</view>
</template>
<script>
	import navBar from '../../../components/common/nav-bar'
	import searchEquMatch from '../../common/searchEquMatch'
	import screenPopup from "../common/screenPopup.vue";
	import Approval from '../common/toApprove.vue'
	import {Dialog} from "vant";
	import {
		mapGetters
	} from "vuex";
	import moment from "moment";
	export default {
		name: 'todoOrder',
		components: {
			navBar,
			screenPopup,
			searchEquMatch,
			Approval
		},
		props: {},
		data() {
			return {
				isChangeRadio:false,
				isRefresh:false,
				iconUrl: require("../../../static/img/batch.png"),
				currentTab: "non-executed", // 当前显示内容 non-executed 未领取 executed 认领
				backgroundColor: '#417ADC',
				title: '待办工单',
				showSearch: false,
				showScreen: false,
				searchValue: '',
				taskList: [],
				showApproval:false,
				refreshing: false, // 是否正在刷新
				isLoading: false,
				finished: false,
				total: 0, // 总条数
				page: 1,
				limit: 20,
				isChoosable: false, // 是否可进行选择
				currentIndex: '0',
				taskType: '0', // 右侧筛选工单类型,
				color: (AUDITSTATUS) => {
					// 0:待审核,1:审批拒绝,2:待执行,3.已完成4:撤销
					if (AUDITSTATUS === '0') {
						return 'left-state-dsp'
					} else if (AUDITSTATUS === '1') {
						return 'left-state-jj'
					} else if (AUDITSTATUS === '2') {
						return 'left-state-dzx'
					} else if (AUDITSTATUS === '3') {
						return 'left-state-ywc'
					} else {
						return 'left-state-ycx'
					}
				},
				typeList: [{
					title: '工单类型',
					type: 'orderType',
					optionList: [{
						VALUE: '0',
						TITLE: "全部"
					}, {
						TITLE: "通信机房出入工单",
						VALUE: '1'

					}, {
						TITLE: "通信网管出入工单",
						VALUE: '2'
					}]
				}]
			}
		},
		computed: {
			...mapGetters(['userData'])
		},
		watch: {},
		beforeDestroy() {
			this.goBack();
		},
		onLoad(option) {
			this.taskType = option.id;
			if(this.taskType === '4'){
				this.isChangeRadio = true
			}
			this.getTaskListByTodoT();
		},
		onShow() {
			console.log(this.isRefresh,"this.isRefresh")
			if(this.isRefresh == true){
				this.onRefresh()
			}
			
		},
		methods: {
			examineSeal ({radio, determineResult}) { // 审批组件点击确认事件
			  let params = {
			    "userId":  this.userData.USERID, // 是	string	登录用户ID
			    "username":  this.userData.SUERNAME, // 是	string	登录用户名称
			    "roleId": this.userData.roleId, // 是	string	登录用户权限ID
			    "state": radio,
			    "explain": determineResult,
				"modeType" : this.taskType === "2" ? "WG" : this.taskType === "4" ? "YZSP" : "",
			    "ids": this.taskList.reduce((prev, item) => {
			      if (item.isChecked) {
			        prev.push(item.ID)
			      }
			
			      return prev;
			    }, []),
			  }
			
			  this.$api.examineSeal(params).then(res => {
			    if (res.code === 0) {
			      Dialog.alert({
			        message: "审批成功"
			      }).then(() => {
			        this.showApproval = false;
					this.isChoosable = false;
					this.iconUrl = require('../../../static/img/batch.png');
					this.isRefresh = true;
			        this.onRefresh();
					
					// uni.navigateBack()
			      });
			    }
			  })
			},
			clickCheckBox () {
			    
			},
			changeApprovalStatus() {
				if (!this.isChoosable) {
					this.isChoosable = true;
					this.iconUrl = require('../../../static/img/cancel.png');
					// this.chooseText = "取消"
				} else {
					this.isChoosable = false;
					this.iconUrl = require('../../../static/img/batch.png');
					// this.chooseText = "批量审批"
				}
			
				
			},
			// 获取列表
			getTaskListByTodoT() {
				  
				let params = {
					page: this.page,
					limit: this.limit,
					handle: this.currentIndex,
					updateUid: this.userData.USERID,
					updateName: this.searchValue,
					workType: this.taskType
				}
				this.$api.selectWaitHandleList(params).then(res => {
					this.isLoading = false;
					this.refreshing = false;
					this.taskList = this.taskList && this.taskList.concat(res.data.taskList.map(item => {
						const TYPESName = item.TYPES === 'TXSP_MK_JF_TYPE' ? '通信机房' : (item.TYPES ===
							'TXSP_MK_WG_TYPE' ? '通信网管' : item.TYPES === 'TXSP_MK_YZ_TYPE' ? '印章使用' : '')
						return {
							updateTime: item.UPDATETIME ? moment(item.UPDATETIME).format(
								'YYYY-MM-DD HH:mm') : null,
							TYPESName,
							...item
						}
					}));
					this.total = +res.data.total_number
					  
				})
			},
			onRefresh() {
				this.refreshing = true;
				this.finished = false;
				this.page = 1;
				this.taskList = [];
				this.getTaskListByTodoT()
			},
			reset() {
				this.onRefresh()
			},
			loadMore() {
				if (this.total > this.taskList.length) {
					this.page = this.page + 1;
					this.getTaskListByTodoT();
				} else {
					this.finished = true;
				}
			},
			confirmCondition(selected) {
				this.taskType = selected.orderType
				this.onRefresh()
			},
			goBack() {
				uni.navigateTo({
					url: '/pages/operationApprove/index/index'
				})
			},
			goApproval () {
			
			  let checkedTask = this.taskList.filter(item => item.isChecked);
			  if (checkedTask.length === 0) return;
			
			  this.showApproval = true;
			},
			jump(item) {
				if (this.isChoosable) return; // 如果目前处于批量状态，则不能单个审批
				if (item.TYPES === 'TXSP_MK_JF_TYPE') {
					uni.navigateTo({
						url: `/pages/operationApprove/todoOrder/machineRoomApprove?ID=${item.ID}&AUDITSTATUS=${item.AUDITSTATUS}&AUDITSTATUSNAME=${item.AUDITSTATUSNAME}`
					})
				} else if(item.TYPES === 'TXSP_MK_WG_TYPE') {
					uni.navigateTo({
						url: `/pages/operationApprove/todoOrder/networkOrderApprove?ID=${item.ID}&AUDITSTATUS=${item.AUDITSTATUS}&AUDITSTATUSNAME=${item.AUDITSTATUSNAME}&type=${'wg'}`
					})
				}else{
					uni.navigateTo({
						url: `/pages/operationApprove/sealApproval/sealDetailsProvinice?id=${item.ID}&pagetype=${'workorderpending'}`
					})
				}
			},
			screen() {
				this.showScreen = true;
			},
			onSearch(searchValue) {
				this.searchValue = searchValue;
				this.onRefresh();
				this.showSearch = false;
			},
			tabChange(currentTab) {
				this.currentTab = currentTab;
				(currentTab === "executed") && (this.currentIndex = '1');
				(currentTab === "non-executed") && (this.currentIndex = '0');
				this.onRefresh()
			}
		}
	};
</script>
<style scoped lang="scss">
	.patrol-task {
		width: 100vw;
		height: 100vh;
		background: #F2F6FA;
		overflow: hidden;

		.header {
			img {
				width: px2vw(48);
				margin-right: px2vw(40);
			}
		}

		.header-bar {
			height: px2vh(220);
			border-radius: 0 0 px2vh(40) px2vh(40);
			background: #417ADC;
			// margin-bottom: px2vh(130);
			display: flex;
			justify-content: center;

			.get-state-tab {
				width: calc(100% - #{px2vw(60)});
				height: px2vh(120);
				border-radius: px2vw(20);
				box-sizing: border-box;
				// margin: px2vh(40) px2vw(30) px2vh(37);
				background-color: rgba(255, 255, 255, 0.4);
				display: flex;
				justify-content: center;
				align-items: center;
				border: px2vw(2) solid rgba(198, 215, 245, 1);

				.info-tab-item {
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgba(255, 255, 255, 1);
					font-weight: bold;
					font-size: px2vw(38);

					&.info-tab-current {
						height: px2vh(100);
						margin: 0 px2vw(10);
						margin-right: px2vw(10);
						border-radius: px2vw(20);
						background-color: rgba(255, 255, 255, 0.7);
						color: rgba(65, 122, 220, 1);
						font-weight: Bold;
					}
				}
			}
		}

		.patrol-search {
			width: px2vw(1020);
			height: 38px;
			margin: px2vw(30) px2vh(30);
			position: relative;
			top: px2vh(-75);
			border-radius: px2vw(20);
			overflow: hidden;

			.van-search {
				padding: 0 0;
				height: 38px;

			}

			.van-search__content {
				background: #fff;
				height: 38px;
			}

			/deep/.van-field__control {
				height: 30px;
			}
		}

		.patrol-main {
			height: calc(100vh - #{px2vh(383)} - 38px);
			overflow: auto;
			margin-top: px2vh(-65);

			.patrol-list,
			.patrol-list-main {
				width: px2vw(1020);
				//height: px2vh(520);
				background: #fff;
				border-radius: px2vw(20) px2vh(20);
				margin: 0 px2vw(30) px2vh(30) px2vw(30);
				padding-bottom: px2vw(30);

				.patrol-title {
					width: px2vw(940);
					height: px2vh(80);
					margin-left: px2vw(40);
					padding-top: px2vw(30);
					margin-bottom: px2vh(30);
					display: flex;
					align-items: center;
					justify-content: space-between;

					img {
						width: px2vw(64);
						height: px2vw(64);
						margin-top: px2vh(6);
						float: left;
					}

					.task-title-main{
						width: px2vw(750);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-left: px2vw(20);
						font-size: px2vh(48);
					}

					.task-status {
						width: px2vw(150);
						height: px2vh(50);
						line-height: px2vh(50);
						border-radius: px2vw(10);
						font-size: px2vw(32);
						text-align: center;
						margin-top: px2vw(8);
					}

					.left-state-ywc {
						color: #3CDA68;
						background: rgba(60, 218, 104, .1);
					}

					.left-state-dsp {
						color: #FFAD0E;
						background: rgba(255, 173, 14, .1);
					}

					.left-state-jj {
						color: #FF7070;
						background: rgba(255, 112, 112, .1);
					}

					.left-state-dzx {
						color: #417ADC;
						background: rgba(65, 122, 220, .1);
					}

					.left-state-ycx {
						color: #8C8C8C;
						background: rgba(140, 140, 140, .1);
					}
				}

				.patrol-hr {
					width: px2vw(940);
					border: px2vh(1) solid #e5e5e5;
					margin-left: px2vw(40);
					margin-bottom: px2vh(42);
				}

				.top-patrol-main {
					width: px2vw(900);
					font-size: px2vh(36);
					line-height: px2vh(62);
					margin-left: px2vw(60);

					.patrol-big-ltitle,
					.patrol-big-rtitle {
						color: #666;
					}

					.patrol-small-ltitle,
					.patrol-small-rtitle {
						margin-left: px2vw(25);
						color: #333;
					}

					.patrol-big-rtitle {
						margin-left: px2vw(40);
					}
				}
			}

			.patrol-list-main {

				//height: px2vh(620);
				.task-hr {
					width: px2vw(940);
					border: 0;
					border-bottom: px2vh(6) dashed #e5e5e5;
					margin-top: px2vh(14);
					margin-left: px2vw(40);
				}

				.by {
					position: absolute;
					width: px2vw(40);
					height: px2vh(40);
					border-radius: px2vw(100);
					left: px2vw(12);
					float: left;
					background: #F2F6FA;
				}

				.byr {
					position: absolute;
					width: px2vw(40);
					height: px2vh(40);
					border-radius: px2vw(100);
					right: px2vw(12);
					float: right;
					background: #F2F6FA;
				}

				.bottom-patrol {
					width: px2vw(940);
					height: px2vh(54);
					margin-left: px2vw(40);
					margin-top: px2vh(26);
					font-size: px2vw(32);

					.left-bottom-patrol {
						display: flex;
						justify-content: center;
						align-items: center;
						min-width: px2vw(300);
						padding: 2px 4px;
						//height: px2vh(54);
						background: #ECF1FB;
						float: left;
						text-align: center;
						color: #417ADC;
						border-radius: px2vw(8);
					}

					.right-bottom-patrol {
						width: px2vw(120);
						height: px2vh(54);
						float: right;
					}
				}
			}
		}
		.submit-wrap {
		  width: calc(100vw - #{px2vw(60)});
		  padding: px2vh(0) px2vw(30);
		  text-align: center;
		  position: fixed;
		  bottom: 20px;
		
		  /deep/ .van-button {
		    width: 100%;
		    height: px2vh(120);
		    color: #fff;
		    background-color: #417ADC;
		    border: 1px solid #417ADC;
		    border-radius: px2vh(60);
		  }
		}

	}
</style>
